<template>
	<view class="container">
		<view class="header">
			<text class="title">更多功能</text>
		</view>
		
		<!-- 功能列表 -->
		<view class="function-list">
			<view class="function-group" v-for="(group, index) in functionGroups" :key="index">
				<text class="group-title">{{ group.title }}</text>
				<view class="group-content">
					<view 
						class="function-item" 
						v-for="(item, itemIndex) in group.items" 
						:key="itemIndex"
						@click="handleFunction(item.type)"
					>
						<view class="function-icon" :style="{ background: item.color }">
							<uni-icons :type="item.icon" size="24" color="#fff"></uni-icons>
						</view>
						<view class="function-info">
							<text class="function-name">{{ item.name }}</text>
							<text class="function-desc">{{ item.description }}</text>
						</view>
						<uni-icons type="right" size="16" color="#95a5a6"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				functionGroups: [
					// {
					// 	title: '学习工具',
					// 	items: [
					// 		{
					// 			type: 'calendar',
					// 			name: '学习日历',
					// 			description: '查看课程和考试安排',
					// 			icon: 'calendar',
					// 			color: '#4b7bec'
					// 		},
					// 		{
					// 			type: 'statistics',
					// 			name: '学习统计',
					// 			description: '查看学习时长和进度',
					// 			icon: 'list',
					// 			color: '#2ecc71'
					// 		},
					// 		{
					// 			type: 'review',
					// 			name: '复习计划',
					// 			description: '制定个性化复习计划',
					// 			icon: 'flag',
					// 			color: '#f1c40f'
					// 		}
					// 	]
					// },
					{
						title: '学习资源',
						items: [
							{
								type: 'library',
								name: '电子图书馆',
								description: '浏览专业电子书籍',
								icon: 'map',
								color: '#e74c3c'
							},
							// {
							// 	type: 'database',
							// 	name: '医学数据库',
							// 	description: '访问专业医学数据库',
							// 	icon: 'database',
							// 	color: '#9b59b6'
							// },
							{
								type: 'journal',
								name: '期刊论文',
								description: '浏览最新医学研究',
								icon: 'paperclip',
								color: '#3498db'
							}
						]
					},
					{
						title: '系统设置',
						items: [
							// {
							// 	type: 'notification',
							// 	name: '消息通知',
							// 	description: '设置消息提醒方式',
							// 	icon: 'notification',
							// 	color: '#e67e22'
							// },
							// {
							// 	type: 'theme',
							// 	name: '主题设置',
							// 	description: '自定义应用主题',
							// 	icon: 'paint',
							// 	color: '#1abc9c'
							// },
							{
								type: 'about',
								name: '关于我们',
								description: '了解应用信息',
								icon: 'info',
								color: '#95a5a6'
							}
						]
					}
				]
			}
		},
		methods: {
			handleFunction(type) {
				// return
				const routes = {
					calendar: '/pages/more/calendar',
					statistics: '/pages/more/statistics',
					review: '/pages/more/review',
					library: '/pages/more/library',
					database: '/pages/more/database',
					journal: '/pages/more/journal',
					notification: '/pages/more/notification',
					theme: '/pages/more/theme',
					about: '/pages/more/about'
				};
				
				if (routes[type]) {
					uni.navigateTo({
						url: routes[type]
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 30rpx;
		background-color: #f8f9fc;
		// min-height: 100vh;
	}
	
	.header {
		margin-bottom: 30rpx;
		
		.title {
			font-size: 36rpx;
			font-weight: 600;
			color: #2c3e50;
		}
	}
	
	.function-list {
		.function-group {
			margin-bottom: 30rpx;
			
			.group-title {
				font-size: 32rpx;
				font-weight: 500;
				color: #2c3e50;
				margin-bottom: 20rpx;
				display: block;
			}
			
			.group-content {
				background: #fff;
				border-radius: 12rpx;
				padding: 0 20rpx;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
				
				.function-item {
					display: flex;
					align-items: center;
					padding: 20rpx 0;
					border-bottom: 1px solid #f1f2f6;
					
					&:last-child {
						border-bottom: none;
					}
					
					.function-icon {
						width: 80rpx;
						height: 80rpx;
						border-radius: 16rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 20rpx;
					}
					
					.function-info {
						flex: 1;
						
						.function-name {
							font-size: 28rpx;
							font-weight: 500;
							color: #2c3e50;
							margin-bottom: 4rpx;
							display: block;
						}
						
						.function-desc {
							font-size: 24rpx;
							color: #7f8c8d;
							display: block;
						}
					}
				}
			}
		}
	}
</style> 